{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">

    <script type="text/javascript" src='{% static "js/jquery-1.8.0.min.js" %}'></script>
    <link href='{% static "css/bootstrap.min.css" %}' rel="stylesheet">

    <link href='{% static "css/bootstrap-theme.min.css" %}' rel="stylesheet">
    <script type="text/javascript" src='{% static "js/bootstrap.min.js" %}'></script>
    <script type="text/javascript" src='{% static "js/respond.min.js" %}'></script>

    <link href='{% static "css/web-base.css" %}' rel="stylesheet">
    <script type="text/javascript">
        var basePath = 'http://demo.wcpdoc.com:80/';
        $(function() {
            $.ajaxSetup({
                cache: false
            });
        })
        //-->
    </script>
    <link href='{% static "css/web-succinct.css" %}' rel="stylesheet">
    <link href='{% static "css/wcp-photoImgs.css" %}' rel="stylesheet">
    <style type="text/css">
        .wcp-photo-box {
            margin-bottom: 20px;
            margin-top: 0px;
        }

        .wcp-photo-box a {
            color: #4d5356;
        }

        .wcp-photo-box a:HOVER {
            color: #D9534F;
        }
    </style>
</head>

<body>





    <!-- class="navbar navbar-default|navbar-inverse" -->
    <style>
        <!--
        .imgMenuIcon {
            width: 16px;
            height: 16px;
            margin-right: 4px;
            margin-left: -2px;
            margin-top: -2px;
        }
        -->
    </style>

    {% include "navbar.html" %}

    <script>
        //初始化判断如果页面在iframe中则不显示head和foot
        initIframeStyle();
        $(function() {
            initIframeStyle();
        });

        function initIframeStyle() {
            if (self != top) {
                $('.navbar').hide();
                $('.super_content').hide();
                $('.super_contentfoot').remove();
                $('.foot').hide();
                $('.wcp-doc-rsg').hide();
                $('.wcp-doc-operate').children().hide();
                $('.wcp-doc-operate').append('<a class="btn btn-default  btn-xs" target="_blank" href="' + window.location.href + '"><span class="glyphicon glyphicon-new-window"></span> &nbsp;新窗口打开</a>');
                $('.towcodeTooltipfalg').hide();
            }
        }
    </script>


    <!-- 确认框和提示框组件，使用方法在最下方！confirm和alert的bootstrap实现 -->
    <div id="ycf-alert" class="modal">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span><span class="sr-only">Close</span>
                    </button>
                    <h5 class="modal-title">
                        <i class="fa fa-exclamation-circle"></i> [Title]
                    </h5>
                </div>
                <div class="modal-body small">
                    <p>[Message]</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>
                    <button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        //Modal.alert({msg: '内容',title: '标题',btnok: '确定',btncl:'取消'});
        //Modal.confirm({msg : "是否删除角色？"}).on(function(e) {alert("返回结果：" + e);});
        $(function() {
            //控制内容中的图片，在缩放情况下不变形
            $('#docContentsId img').attr('height', '');
            window.Modal = function() {
                var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
                var alr = $("#ycf-alert");
                var ahtml = alr.html();
                var _alert = function(options) {
                    alr.html(ahtml); // 复原
                    alr.find('.ok').removeClass('btn-primary').addClass(
                        'btn-primary');
                    alr.find('.cancel').hide();
                    _dialog(options);

                    return {
                        on: function(callback) {
                            if (callback && callback instanceof Function) {
                                alr.find('.ok').click(function() {
                                    callback(true)
                                });
                            }
                        }
                    };
                };
                var _confirm = function(options) {
                    alr.html(ahtml); // 复原
                    alr.find('.ok').removeClass('btn-primary').addClass(
                        'btn-primary');
                    alr.find('.cancel').show();
                    _dialog(options);
                    return {
                        on: function(callback) {
                            if (callback && callback instanceof Function) {
                                alr.find('.ok').click(function() {
                                    callback(true)
                                });
                                alr.find('.cancel').click(function() {
                                    callback(false)
                                });
                            }
                        }
                    };
                };
                var _dialog = function(options) {
                    var ops = {
                        msg: "提示内容",
                        title: "操作提示",
                        btnok: "确定",
                        btncl: "取消"
                    };
                    $.extend(ops, options);
                    console.log(alr);
                    var html = alr.html().replace(reg, function(node, key) {
                        return {
                            Title: ops.title,
                            Message: ops.msg,
                            BtnOk: ops.btnok,
                            BtnCancel: ops.btncl
                        } [key];
                    });

                    alr.html(html);
                    alr.modal({
                        width: 500,
                        backdrop: 'static'
                    });
                }
                return {
                    alert: _alert,
                    confirm: _confirm
                }
            }();
        });
    </script>
    <!-- system modal end -->
    <script type="text/javascript">
        function luceneSearch(key) {
            $('#wordId').val(key);
            $('#lucenesearchFormId').submit();
        }

        function luceneSearchGo(page) {
            $('#pageNumId').val(page);
            $('#lucenesearchFormId').submit();
        }
        //-->
    </script>





    <div class="super_content">
    </div>
    <!-- 置顶大图 -->



    <!-- ID,TITLE,DOCDESCRIBE,AUTHOR,PUBTIME,TAGKEY ,IMGID,VISITNUM,PRAISEYES,PRAISENO,HOTNUM,TYPENAME -->
    <!-- Carousel
    ================================================== -->

    <div style="background-color: #ffffff; padding-bottom: 20px;">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="widget-box " style="border-radius: 4px; margin: 0px; border: 0px;">
                        <div class="stream-list p-stream">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div id="myCarousel" class="carousel slide" data-ride="carousel">
                                        <!-- Indicators -->
                                        <div class="carousel-inner" role="listbox">

                                            {% for carousel in carousels %}
                                            <div class="item {% if forloop.counter == 1 %}active{% endif %}">

                                                <a target="_blank" href="{% url 'article' carousel.article.pk %}" role="button">
                                                        <img class="first-slide effect-img" style="width: 100%; max-height: 350px;" src="{{ carousel.image.url }}" >
                                                    </a>

                                                </div>

                                            {% endfor %}


                                        </div>
                                        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                            <span class="sr-only">Previous</span>
                                        </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                            <span class="sr-only">Next</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(function() {
            $('#myCarousel')
                .carousel({
                    //控制轮播组件的切换间隔
                    interval: 5000
                })
        });
    </script>
    <div class="containerbox">
        <div class="container">
            <div class="row">
                <div class="col-xs-3">
                    <!-- 最新评论 -->

                    <div class="wcp-su-out-box">
                        <div class="unit">
                            <div class="title">
                                <i class="glyphicon glyphicon-comment"></i> 最新评论
                            </div>
                        </div>

                        
                        {% for comment in latest_comments %}
                            <div class="stream-item unit unit-min link" id="loop-30">
                                <div class="media">
                                    <p class="pull-left hidden-xs" href="">
                                    {{ comment.author.username }} : 
                                    </p>
                                    <div class="media-body">
                                        <div style="margin-left: 4px;" class="pull-left">
                                            <div>
                                                <p class="doc_node_content">
                                                {{ comment.content }}

                                                &nbsp;&nbsp; <a class="tip" href="{% url 'article' comment.article.pk %}">
                                                    ({{ comment.article.title }})
                                                </a>&nbsp;&nbsp;
                                                    <span style="color: #aaaaaa; font-size: 12px;">
                                                        {{ comment.create_time|date:"Y-m-d H:i:s" }}
                                                    </span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}

                    </div>

                </div>
                <div class="col-xs-9" style="padding-left: 5px;">
                    <!-- 推荐阅读 -->




                    <script type="text/javascript" src='{% static "js/wcp-photoImgs.js" %}'></script>
                    <script type="text/javascript">
                        $(function() {
                            initPhotoImgsSize('.wcp-photo-imgbox');
                            $(window).resize(function() {
                                initPhotoImgsSize('.wcp-photo-imgbox');
                            });
                            $("img").load(function() {
                                initPhotoImgSize($(this).parents('.wcp-photo-imgbox'));
                            });
                        });
                    </script>
                    <!-- 知識分類 -->




                    <style>
                        .wcp-home-type-list li {
                            float: left;
                            padding: 4px;
                            padding-left: 12px;
                            padding-right: 12px;
                            border-radius: 4px;
                            margin-top: 10px;
                            margin-bottom: 10px;
                        }

                        .wcp-home-type-list {
                            margin: 0px;
                            padding: 0px;
                        }

                        .wcp-home-type-list .level1 {
                            font-weight: 700;
                            font-size: 16px;
                        }

                        .wcp-home-type-list a {
                            color: #4d5356;
                        }

                        .wcp-home-type-list a:HOVER {
                            color: #ba2636;
                        }

                        .wcp-home-type-list li:HOVER {
                            background-color: #f2f2f2;
                        }
                    </style>
                    <div class="wcp-su-out-box">
                        <div class="unit">
                            <div class="title">
                                <i class="glyphicon glyphicon-list-alt"></i> 知识分类
                            </div>
                        </div>

                        {% for category in categories %}

                            <div class="unit unit-min link wcp-type-homebox" style="padding-top: 0px; padding-bottom: 0px; max-height: 55px; overflow: hidden;">

                                <ul class="wcp-home-type-list">

                                    <li title="知识{{ category.article_set.count }}" class="level1">

                                        <a href="{% url 'category' category.pk %}">
                                            {{ category.title }}
                                            <span class="farm_tree_num" style="font-size: 0.87em;font-weight: 500">
                                                {{ category.article_set.count }}
                                            </span>

                                        </a>
                                    </li>
                                    <li style="color: #eeeeee; padding-left: 0px; padding-right: 0px; margin-left: 10px; margin-right: 10px;">
                                        <i class="glyphicon glyphicon-chevron-right"></i>
                                    </li>


                                {% for subcategory in category.subcategory_set.all %}
                                    <li>
                                        <a class="level2" href="{% url 'category' category.pk subcategory.pk %}">
                                            {{ subcategory.title }}        
                                        </a>
                                    </li>

                                {% endfor %}
                                    



                                </ul>
                                <hr style="clear: both; border: 0px;">
                            </div>
                        {% endfor %}



                    </div>
                    <script type="text/javascript">
                        $(function() {
                            $('.wcp-type-homebox').bind('mouseover', function() {
                                $(this).css('max-height', '165px');
                            });
                            $('.wcp-type-homebox').bind('mouseout', function() {
                                $(this).css('max-height', '55px');
                            });
                        });
                    </script>





                    <div class="wcp-su-out-box">
                        <div class="unit">
                            <div class="title">
                                <i class="glyphicon glyphicon-fire"></i> 热门知识 
                            </div>
                        </div>





                        <style>
                            .tagsearch {
                                cursor: pointer;
                                padding: 2px;
                                padding-left: 4px;
                                padding-right: 4px;
                                font-size: 12px;
                                background-color: #aaa;
                            }

                            .wcp-typetop {
                                font-size: 0.7em;
                                padding-left: 6px;
                                padding-right: 6px;
                                padding-top: 2px;
                                padding-bottom: 2px;
                                position: relative;
                                top: -3px;
                            }

                            .wcp-coin-flag {
                                width: 1.2em;
                                height: 1.2em;
                                margin-top: -3px;
                            }
                        </style>
                        <div class="stream-list p-stream doc_brief">

                            {% for article in latest_articles %}

                                <div class="stream-item" id="loop-30">
                                    <div class="media">

                                        {% if article.thumbnail %}
                                            <div class="pull-right hidden-xs doc-brief-imgbox">
                                                <div class="effect-img-box" style="width: 100%; overflow: hidden; padding-top: 6px;">
                                                    <a class="doc_node_title" target="_blank" href="{% url 'article' article.pk %}">
                                                        <img class="effect-img" src="{{ article.thumbnail.url }}">
                                                    </a>
                                                </div>
                                            </div>
                                        {% endif %}


                                        <div class="media-body">
                                            <div style="margin-left: 4px;" class="pull-left">
                                                <div class="doc_node_title_box">
                                                    <a class="doc_node_title" target="_blank" href="{% url 'article' article.pk %}">


                                                        <span class="glyphicon glyphicon-book"></span>

                                                        {{ article.title }}
                                                    </a>
                                                </div>


                                                <div>
                                                    <p class="doc_node_content" style="margin-bottom: 4px; height: auto;">

                                                        {{ article.content|truncatechars:"400" }}

                                                    </p>
                                                </div>

                                                <div style="max-height: 48px; overflow: hidden; margin-bottom: 4px;">

                                                    {% for tag in article.tags.all %}
                                                        <span class="label label-default" title="{{ tag.title }}">
                                                            {{ tag.title }}
                                                        </span>
                                                    {% endfor %}

                                                </div>
                                                <div class="side_unit_info side_unit_info_left_box">
                                                    <i class="glyphicon glyphicon-user"></i>
                                                        <span>{{ article.author.username }}</span>
                                                    &nbsp;&nbsp;&nbsp;
                                                        {{ article.create_time|date:"Y-m-d H:i:s" }}
                                                    &nbsp;&nbsp;&nbsp; <a href="webtype/view402880e95c2fdd9b015c3017e719002c/Pub1.html">
                                                    </a> &nbsp;&nbsp;&nbsp;  <span title="阅读量"> <i class="glyphicon glyphicon-hand-up"></i>
                                                        {{ article.view_count }}
                                                    </span> <span title="评论数"> <i class="glyphicon glyphicon-comment"></i>
                                                        {{ article.comment_set.count }}
                                                    </span>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            {% endfor %}


                        </div>
                        <script type="text/javascript" src='{% static "js/wcp-photoImgs.js" %}'></script>
                        <script type="text/javascript">
                            $(function() {
                                //标签
                                $('.tagsearch').bind('click', function() {
                                    luceneSearch('TAG:' + $(this).text());
                                });
                                //格式化知识图片
                                initPhotoImgsSize('.effect-img-box');
                                $(window).resize(function() {
                                    initPhotoImgsSize('.effect-img-box');
                                });
                                $(".effect-img").load(function() {
                                    initPhotoImgSize($(this).parents('.effect-img-box'));
                                });
                            });
                        </script>
                    </div>

                </div>
            </div>
        </div>
    </div>




    <div class="super_contentfoot  hidden-xs" style="margin: 0px;">
        <div class="container ">
            <div class="row">
                <div class="col-sm-1">



                    <style>
                        /* tooltip */
                        #tooltip {
                            position: absolute;
                            border: 1px solid #fff;
                            background: #fff;
                            padding: 3px 3px 3px 3px;
                            color: #333;
                            display: none;
                        }
                    </style>
                    <div class="row">
                        <div class="col-sm-12  visible-lg visible-md" style="text-align: center;">
                            <div>
                            </div>
                        </div>
                    </div>
                    <script>
                        $(function() {
                            var towcodelinkurl = location.href;
                            $('.towcodelink').attr('href', towcodelinkurl);
                            initTowCodeTooltip('.towcodeTooltipfalg',
                                'http://demo.wcpdoc.com:80/home/PubQRCode.do', -170, 20);
                            initTowCodeTooltip('.towcodeTooltipfalgOpposite',
                                'http://demo.wcpdoc.com:80/home/PubQRCode.do', 0, -175);
                        });

                        function initTowCodeTooltip(objKey, imgurl, x, y) {
                            $(objKey)
                                .live(
                                    'mouseover',
                                    function(e) {
                                        this.imgTitle = this.title;
                                        this.title = "";
                                        var imgTitle = this.imgTitle ? "<br/>" +
                                            this.imgTitle : "";
                                        var tooltip = "<div id='tooltip'><img style='max-width: 150px;' src='" + imgurl + "' alt='预览图'/>" +
                                            imgTitle + "<\/div>"; //创建 div 元素
                                        $("body").append(tooltip);
                                        $("#tooltip").css({
                                            "top": (e.pageY + y) + "px",
                                            "left": (e.pageX + x) + "px"
                                        }).show("fast"); //设置x坐标和y坐标，并且显示
                                    });

                            $(objKey).live('mouseout', function(e) {
                                this.title = this.imgTitle;
                                $("#tooltip").remove();
                            });
                            $(objKey).live('mousemove', function(e) {
                                $("#tooltip").css({
                                    "top": (e.pageY + y) + "px",
                                    "left": (e.pageX + x) + "px"
                                });
                            });
                        }
                    </script>
                </div>
                <div class="col-sm-11 putServerBox">
                    <ul id="recommendServiceList" class="footServerUl">


                    </ul>
                </div>
            </div>
        </div>
    </div>



    <div class="foot">
        Share Cheese
    </div>
    <script type="text/javascript">
        $(function() {
            $(window).resize(function() {
                $('.containerbox').css('min-height', $(window).height() - 170);
            });
            $('.containerbox').css('min-height', $(window).height() - 170);
        });
    </script>
</body>

</html>
